<template>
  <div class="app-container calendar-list-container">
    <!--标签页-->
    <template>
      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
        <el-tab-pane label="机柜列表" name="first"></el-tab-pane>
        <el-tab-pane label="充电宝列表" name="second"></el-tab-pane>
      </el-tabs>
    </template>
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true">
          <el-form-item label="充电宝ID">
            <el-input @keyup.enter.native="handleFilter" clearable v-model="listQuery.batteryId" style="width: 200px;" class="filter-item" placeholder="请输入充电宝ID" >
            </el-input>
          </el-form-item>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
      </el-form>          
    </div>
   <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column  label="序号" prop="index" />
      <el-table-column  label="充电宝ID" prop="batteryId"/>
      <el-table-column  label="报废日期" prop="leaseEndTime">
        <template slot-scope="scope">
          <span v-if="scope.row.leaseEndTime">{{scope.row.leaseEndTime | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  label="累计使用时间" prop="hourage">
        <template slot-scope="scope">
           <span v-if="scope.row.hourage">{{scope.row.hourage}}/小时</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  label="第一次被借出的时间" prop="leaseStartTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.leaseStartTime">{{scope.row.leaseStartTime | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getBatteryList } from '@/api/financial'
export default {
  name: 'financial_back2',
  components: {
    CountTo,
  },
  data() {
    return {
      total: 0,
      parameter: '',
      date: '',
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        batteryId: ''
      },
      value: '',
      list: null,
      loading: {
        list: false,
        download: false
      },
      activeName2: 'second'
    }
  },
 
  created() {
    this.getBatteryList()
  },
  methods: {
   /*充电宝列表 */
    async getBatteryList() {
      this.loading.list = true
      try {
        const { data } = await getBatteryList(this.listQuery)
        this.list = data.records.map((item, index) => ({
          index: index + 1,
          ...item
        }))
        this.total = data.total
        console.log(data)
      } catch (error) {        
      }
      this.loading.list = false     
    },
    handleFilter() {
      this.listQuery.pageNo = 1
     this.getBatteryList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getBatteryList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getBatteryList()
    },
    handleClick(tab, event) {
        if(tab.name == 'first') {
          this.$router.push('/financial/cabinet')
        }
    }
  }
}
</script>
